<template>
  <a-card title="数据总量">
    <template #extra>
      <a-tag color="blue">
        <DeploymentUnitOutlined />
      </a-tag>
    </template>
    <div
      v-if="amountData"
      class="flex items-center justify-center h-32 font-mono text-3xl text-purple-600"
    >
      {{ amountData }}
    </div>
    <div
      v-else
      class="flex items-center justify-center bg-gray-200"
      style="height: 200px"
    >
      <a-spin />
    </div>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, ref } from "vue";
import { DeploymentUnitOutlined } from "@ant-design/icons-vue";
import { getDisplayDataChart } from "@/controller/Display";

export default defineComponent({
  name: "DisplayDataCard",
  components: {
    DeploymentUnitOutlined,
  },
  setup() {
    const amountData = ref<number>();
    onBeforeMount(async () => {
      amountData.value = await getDisplayDataChart();
    });
    return { amountData };
  },
});
</script>

<style scoped lang="scss"></style>
